<div class="page-container">
  <!-- 搜索区域 -->
  <div class="search-area">
    <div class="search-form">
      <div class="search-item">
        <label>调拨单号</label>
        <input type="text" class="form-control" [(ngModel)]="searchParams.allocationNo" placeholder="请输入" />
      </div>
      <div class="search-item">
        <label>单据状态</label>
        <select class="form-select" [(ngModel)]="searchParams.status">
          <option value="">请选择</option>
          <option *ngFor="let s of statusOptions" [value]="s.value">{{s.label}}</option>
        </select>
      </div>
      <div class="search-item">
        <label>出入库状态</label>
        <select class="form-select" [(ngModel)]="searchParams.outWarehouseStatus">
          <option value="">请选择</option>
          <option *ngFor="let s of warehouseStatusOptions" [value]="s.value">{{s.label}}</option>
        </select>
      </div>
     
      <div class="search-buttons">
        <button type="button" class="btn btn-primary btn-gradient" (click)="search()">
          <i class="fas fa-search"></i> 查询
        </button>
        <button type="button" class="btn btn-secondary btn-gray" (click)="reset()">
          <i class="fas fa-sync"></i> 重置
        </button>
        <button type="button" class="btn btn-secondary btn-gray" (click)="add()">
          <i class="fas fa-filter"></i> 高级搜索
        </button>
      </div>
    </div>
  </div>

  <!-- 操作按钮区域 -->
  <div class="operation-area">
    <button type="button" class="btn btn-primary btn-gradient" (click)="add()">
      <i class="fas fa-plus"></i> 新增
    </button>
    <button type="button" class="btn btn-secondary btn-gray" (click)="delete(0)">
      <i class="fas fa-trash"></i> 删除
    </button>
    <button type="button" class="btn btn-secondary btn-gray" (click)="copy(0)">
      <i class="fas fa-copy"></i> 复制
    </button>
    <button type="button" class="btn btn-secondary btn-gray" (click)="audit(0)">
      <i class="fas fa-check-circle"></i> 审核
    </button>
    <button type="button" class="btn btn-success btn-green" (click)="export()">
      <i class="fas fa-download"></i> 导出
    </button>
    <button type="button" class="btn btn-secondary btn-gray" (click)="loadData()">
      <i class="fas fa-sync"></i> 刷新
    </button>
  </div>

  <!-- 表格区域 - 使用固定列的表格结构 -->
  <div class="table-container" [ngClass]="{'show-shadow': isScrolled}" (scroll)="onTableScroll($event)">
    <table class="table table-bordered table-hover table-fixed-columns">
      <thead class="table-light">
        <tr>
          <th class="fixed-column fixed-column-1">
            <input type="checkbox" [checked]="false" (change)="toggleSelectAll($event)">
          </th>
          <th class="fixed-column fixed-column-2">序号</th>
          <th class="fixed-column fixed-column-3">调拨单号</th>
          <th class="column-status">单据状态</th>
          <th class="column-date">调拨申请日期</th>
          <th class="column-type">调拨类型</th>                                                                                    
          <th class="column-warehouse">调出仓库</th>
          <th class="column-warehouse">调入仓库</th>
        
          <th class="column-quantity">调拨数量</th>
          <th class="column-amount">调拨金额</th>
          <th class="column-handler">经办人</th>
          <th class="column-handler">制单人</th>
          <th class="column-handler">制单时间</th>
          <th class="operation-column">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngIf="loading">
          <td colspan="15" class="text-center py-4">
            <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="mt-2">正在加载数据...</div>
          </td>
        </tr>
        <tr *ngIf="!loading && listOfData.length === 0">
          <td colspan="15" class="text-center py-4 text-muted">
            <i class="fas fa-inbox me-2"></i>暂无数据
          </td>
        </tr>
        <tr *ngFor="let data of listOfData; let i = index">
          <td class="fixed-column fixed-column-1">
            <input type="checkbox" [checked]="false" (change)="onItemCheckedChange(data, $event.target.checked)">
          </td>
          <td class="fixed-column fixed-column-2">{{ i + 1 }}</td>
          <td class="fixed-column fixed-column-3">
            <a (click)="viewDetail(data.id)" class="link-text">{{ data.allocationNo }}</a>
          </td>
          <td class="column-status">
            <span class="badge" [ngClass]="getStatusBadgeClass(data.status)">{{ data.status }}</span>
          </td>
          <td class="column-date">{{ data.applicationDate | date:'yyyy-MM-dd' }}</td>
          <td class="column-type">{{ data.allocationType }}</td>
          <td class="column-warehouse">{{ data.fromWarehouse }}</td>
          <td class="column-warehouse">{{ data.toWarehouse }}</td>
        
          <td class="column-quantity">{{ data.allocationQuantity }}</td>
          <td class="column-amount">{{ data.allocationAmount }}</td>
          <td class="column-handler">{{ data.handler }}</td>
          <td class="column-handler">{{data.singer}}</td>
          <td class="column-handler">{{data.creationTime | date:'yyyy-MM-dd'}}</td>
          <td class="operation-column">
            <button type="button" class="btn btn-primary btn-gradient btn-sm" (click)="edit(data.id)">
              <i class="fas fa-edit"></i> 编辑
            </button>
            <button type="button" class="btn btn-danger btn-red btn-sm" (click)="delete(data.id)">
              <i class="fas fa-trash"></i> 删除
            </button>
          </td>
        </tr>
        <tr class="table-light fw-bold">
          <td class="fixed-column fixed-column-1">#</td>
          <td class="fixed-column fixed-column-2">-</td>
          <td class="fixed-column fixed-column-3">合计:</td>
          <td class="column-status"></td>
          <td class="column-date"></td>
          <td class="column-type"></td>
          <td class="column-warehouse"></td>
          <td class="column-warehouse"></td>
          <td class="column-status"></td>
          <td class="column-status"></td>
          <td class="column-quantity">总数量: <span class="text-danger">{{ totalQuantity }}</span></td>
          <td class="column-amount">总金额: <span class="text-danger">{{ totalAmount | number: '1.2-2' }}</span></td>
          <td class="column-handler"></td>
          <td class="column-handler"></td>
          <td class="operation-column"></td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <!-- 自定义水平平铺分页 -->
  <div class="custom-pagination">
    <div class="pagination-total">总 {{ listOfData.length }} 条</div>
    <div class="pagination-controls">
      <button type="button" class="btn btn-secondary pagination-btn" [disabled]="currentPage === 1">
        <i class="fas fa-chevron-left"></i>
      </button>
      <div class="pagination-pages">
        <button 
          *ngFor="let page of pageNumbers" 
          type="button"
          class="btn pagination-btn page-number"
          [ngClass]="currentPage === page ? 'btn-primary' : 'btn-secondary'"
          (click)="changePage(page)"
        >
          {{ page }}
        </button>
      </div>
      <button type="button" class="btn btn-secondary pagination-btn" [disabled]="currentPage === totalPages">
        <i class="fas fa-chevron-right"></i>
      </button>
      <div class="pagination-size-changer">
        <span class="size-changer-text">10 条/页</span>
        <i class="fas fa-chevron-down"></i>
      </div>
    </div>
  </div>
</div> 